<!-- This document was created with HomeSite 2.5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun, J. Brook Monroe, nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>The Mobile Mouse I</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function Describe(text)
{
eval('document.forms[0].explain.value="'+text+'"');
}
//-->
</SCRIPT>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>The Mobile Mouse I</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we suggest a way to liven your web pages.
</FONT><P>
<CENTER>Move the mouse cursor over the images!<BR><TABLE>
<TR>
<TD><A HREF="" onMouseOver="Describe('Just some clips.')"><IMG SRC="../GRAFX/mouseovr/paperclp.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Protection from UV rays!')"><IMG SRC="../GRAFX/mouseovr/sunglass.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Football? Soccer?')"><IMG SRC="../GRAFX/mouseovr/stadium.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Who\'s watching whom?')"><IMG SRC="../GRAFX/mouseovr/eye.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('A three hour tour?')"><IMG SRC="../GRAFX/mouseovr/island.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('The Halls of Justice!')"><IMG SRC="../GRAFX/mouseovr/justice.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
<TR>
<TD><A HREF="" onMouseOver="Describe('21 gears and big tires')"><IMG SRC="../GRAFX/mouseovr/bike.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Lights! Camera!')"><IMG SRC="../GRAFX/mouseovr/clapbord.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Some days I just shoulda stood in bed.')"><IMG SRC="../GRAFX/mouseovr/bed.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Ouch. That\'ll leave a mark.')"><IMG SRC="../GRAFX/mouseovr/compress.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Don\'t call me late for dinner.')"><IMG SRC="../GRAFX/mouseovr/dinner.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Why is this here?')"><IMG SRC="../GRAFX/mouseovr/oildrum.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
<TR>
<TD><A HREF="" onMouseOver="Describe('CD-ROMS are better than books!')"><IMG SRC="../GRAFX/mouseovr/books.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('I\'m a closet thespian.')"><IMG SRC="../GRAFX/mouseovr/theater.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Avoid managers carrying these.')"><IMG SRC="../GRAFX/mouseovr/clipbord.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Lotto winnings?')"><IMG SRC="../GRAFX/mouseovr/moneybag.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('The hills are alive with the sound of this.')"><IMG SRC="../GRAFX/mouseovr/music.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOver="Describe('Okay, gray, green, why not purple?')"><IMG SRC="../GRAFX/mouseovr/alien.gif" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
</TABLE>
<FORM>
<INPUT type="text" name="explain" SIZE=48>
</FORM>
</CENTER>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
Using the <FONT COLOR="770000">onMouseOver()</FONT> event, you can make things a happen on your web page whenever the user
places the mouse cursor over an anchor or client-side image map. (In this example we're showing how to use it with anchors.)
The syntax couldn't be simpler:<P>
<FONT COLOR="770000"><KBD><A HREF="SOMEFILE.HTM" onMouseOver="JSFunc(arg)">Click here</A></KBD></FONT><p>
where <FONT COLOR="770000"><i>JSFunc(arg)</i></FONT> is some JavaScript function you'd like to execute as the result
of the mouse cursor entering the region of the anchor. Alternatively, you can use<p>
<FONT COLOR="770000"><PRE><MAP NAME="map1">
<AREA COORDS="0,0,54,18" onMouseOver="JSFunc(arg)" HREF="javascript:GoFunc(1)">
</MAP>
</PRE></FONT><p>
You can use this event to trigger graphics changes, play audio clips, or update text (like in this example). One common trick
involves changing the browser window status text, but you can go a lot further than that! Your only limit is your imagination!<P>
One thing lacking in this recipe is that when you leave one of the images, the text for that image remains--the form doesn't
go blank. (Try moving over the alien head, then moving right.) You could put lots of empty images bordering the
"visible" images, and have their text be empty, but that would lack a certain amount of elegance. If you've got Netscape 3.0 or greater, or Microsoft Internet Explorer 4.0 or greater,
you can use <A HREF="MOUSEOUT.HTM">another event to solve this problem.</A>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>